.skeleton{
    &__index{
        height: 100%;
        overflow-y: hidden;
        &-bigTitle{
            display: inline-block;
            width: rem(200);
            background-color: #f0f0f0;
            margin: rem(19);
            height: rem(36);
        }
        .bidding{
            &__list{
                position: relative;
                width: rem(720);
                background-color: #fff;
                border-radius: 2px;
                margin: 0 auto rem(24);
                overflow: hidden;
            }
            &__status{
                position: absolute;
                left: 0;
                top: 0;
                width: 0;
                height: 0;
                border-top: rem(80) solid #f0f0f0;
                border-right: rem(80) solid transparent;
            }
            &--header{
                height: 16px;
                margin: rem(58) rem(58) 0;
                background-color: #f6f6f6;
            }
            &__body{
                padding: rem(32) rem(58);
            }
            &__info{
                height: 12px;
                background-color: #f6f6f6;
                animation: line-change .5s ease infinite alternate;
                &.speed-1{
                    animation-duration: .6s;
                }
                &.speed-2{
                    animation-duration: .46s;
                }
                &.speed-3{
                    animation-duration: .32s;
                }
                &:not(:first-child){
                    margin-top: rem(16);
                }
                @keyframes line-change {
                    from{ width: 0; }
                    to{  width:75%; }
                }
            }

            &__footer{
                border-top: 1px solid #f8f8f8;
                padding: rem(28) rem(24);
                display: flex;
                justify-content: flex-end;
                align-items: center;
                &-btn{
                    width: rem(160);
                    height: rem(48);
                    border-radius: 2px;
                    background-color: #f6f6f6;
                    margin-left: rem(32);
                }
            }
        }
    }
    &__detail{
        height: 100%;
        overflow-y: hidden;
        &-bigTitle{
            display: inline-block;
            width: rem(200);
            background-color: #f0f0f0;
            margin: rem(19);
            height: rem(36);
        }
        &__container{
            width: rem(720);
            padding: rem(24);
            background-color: #fff;
            margin: 0 auto rem(16);
            border-right: 2px;
        }
        &-title{
            margin-bottom: rem(44);
            height: 18px;
            background-color: #f8f8f8;
        }
        &-info{
            height: 13px;
            background-color: #f6f6f6;
            &.speed-1{
                width: 50%;
            }
            &.speed-2{
                width: 30%;
            }
            &.speed-3{
                width:39%;
            }
            &.speed-4{
                width: 46%;
            }
            &.speed-5{
                width: 68%;
            }
            &:not(:first-child){
                margin-top: rem(32);
            }
        }
        &-table{
            width: 100%;
            tbody{
                width: 100%;
            }
            th,td{
                height: 40px;
                border-left: 1px solid #f9f9f9;
                border-top: 1px solid #f9f9f9;
            }
            th{
                width: rem(150);
                background-color: #f2f2f2;
            }
            td{
                background-color: #f6f6f6;
            }
        }
    }
}

